import React, { Component } from 'react'
import ReactFullpage from '@fullpage/react-fullpage';
import style from './Home.module.less'
import './swiper.css'
import { Swiper, SwiperSlide } from 'swiper/react';
import classNames from 'classnames';
import SwiperCore, { Autoplay } from 'swiper/core' // 引入核心插件和自动播放组件
import 'swiper/swiper.min.css' // 引入样式
import 'swiper/swiper.css';
import page1 from '../../assets/image/gp8_banner.png'
import page1_1 from '../../assets/image/5.jpg'
import page2 from '../../assets/image/home-background.jpg'
import page2T from '../../assets/image/home-page-fun.jpg'
import page2B from '../../assets/image/home-page-schools.jpg'
import page3_1 from '../../assets/image/p13.png'
import page3_2 from '../../assets/image/p14.png'
import page3_3 from '../../assets/image/p17.png'
import page3_4 from '../../assets/image/p18.png'
import page3_5 from '../../assets/image/p20.png'
SwiperCore.use([Autoplay,]) // 使用插件，插件名放入[]中，这一行是重点
export default class HomePage extends Component {
    state = {
        page3:[
            {
                img:page3_1,
                text:'我不仅用它来转录我所有出版的歌曲，而且还用它来创作和编写我的编曲中的弦乐器部分对于教学目的来说，它也非常有用。',
            },
            {
                img:page3_2,
                text:'Gus G.是来自希腊的专业吉他手。他以PowerMetal乐队Firewind的前吉他手而闻名。',
            },{
                img:page3_3,
                text:'当今金属乐坛最优秀的旋律金属乐队之一，堪称“旋律金属王者”',
            },
            {
                img:page3_4,
                text:'我从15岁开始就一直在使用Musical，Musical已经成为我作为教师，词曲作者和音乐家生活中至关重要的一部分。',
            },
            {
                img:page3_5,
                text:'Fusion风格吉他手，他曾加入Chick CoreaElektric Band并和鼓手Steve Smith和贝斯手Stuart Hamm并同组团，更在传奇的Fusion团体Vital Information担任吉他手。',
            }
        ]
    }
    componentDidMount() {
        // const myfullapge = new ReactFullpage('#fullpage')
        // console.log(myfullapge)

    }
    render() {
        return (
            <div className={style.Home_box}>
                <ReactFullpage
                    //fullpage options
                    // licenseKey={'YOUR_KEY_HERE'}
                    scrollingSpeed={1000} /* Options here */
                    credits={{ enabled: false, label: '', position: false }}
                    render={({ state, fullpageApi }) => {
                        return (
                            <ReactFullpage.Wrapper >
                                <div className={classNames(['section', style.one])}>
                                    <Swiper
                                        autoplay={{
                                            delay: 3000, // 默认延迟3s播放下一张
                                            stopOnLastSlide: false, // 播放到最后一张时停止：否
                                            disableOnInteraction: true, // 用户操作轮播图后停止 ：是
                                            pauseOnMouseEnter: true
                                        }}
                                        speed={1000}
                                        className={style.swiper}
                                        loop
                                    >
                                        <SwiperSlide style={{  }} >
                                            <div className='stripe'>
                                                <div className='stripe_inner'>MUSICAL</div>
                                            </div>
                                        </SwiperSlide>
                                        <SwiperSlide  > <img src={page1} style={{objectFit:'cover',display:'block',height:'100vh'}} alt=""/></SwiperSlide>
                                        <SwiperSlide > <img src={page1_1} style={{objectFit:'cover',display:'block',height:'100vh',width:'100%'}} alt=""/></SwiperSlide>
                                        <SwiperSlide ><img src={page1} style={{objectFit:'cover',display:'block',height:'100vh'}} alt=""/></SwiperSlide>
                                    </Swiper>


                                </div>
                                <div className={classNames(['section', style.two])}  style={{background:`url(${page2}) no-repeat`}}>
                                    <div className='center' style={{height:'90vh'}}>
                                        <div className={style.top}>
                                            <ul>
                                                <li>
                                                    <img src={page2T} alt=""/>
                                                </li>
                                                <li>
                                                    <div>
                                                        <h2>充满乐趣且富有成效</h2>
                                                        <p>Musical通过在学习过程中加入游戏的元素，让您以趣味又具
                                                            有挑战性的方式提高您的音乐技能。当您乐在其中的同时，
                                                            学习会更容易、有效。</p>
                                                    </div>
                                                </li>
                                            </ul>
                                        </div>
                                        <div className={style.bottom}>
                                            <ul>
                                                <li>
                                                    <div>
                                                        <h2>适用于初学者</h2>
                                                        <p>Musical让您能够免费进行音乐教学，利用有趣的互动内容
                                                            来吸引初学者学习的兴趣，让他们在家里，或任何地方都
                                                            能按自己的节奏学习。您可以实时追踪学生的学习进程。</p>
                                                    </div>
                                                </li>
                                                <li>
                                                    <img src={page2B} alt=""/>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                                <div className={classNames(['section', style.three])}>
                                        <div className = {style.cardBox}>
                                            <ul>
                                                {this.state.page3.map((item,index) => {
                                                    return (
                                                        <li>
                                                            <div className={style.top} key={index}>
                                                                <img src={item.img} alt="" style={{width:'100%',height:'100%',objectFit:'cover'}}/>
                                                            </div>
                                                            <div className={style.bottom}>
                                                                <p>{item.text}</p>
                                                            </div>
                                                        </li>
                                                    )
                                                })}

                                            </ul>
                                        </div>
                                </div>
                                <div className={classNames(['section', style.four])}>
                                    <div className='center' style={{
                                        height:'100vh',
                                    }}>
                                        <div className = {style.top}>
                                            <h1>新闻动态</h1>
                                            <ul>
                                                <li className='HomeActive'>最新资讯</li>
                                                <li>使用技巧</li>
                                                <li>常见问题</li>
                                                <li>新闻动态</li>
                                            </ul>
                                        </div>
                                        <div className={style.bottom}>
                                            <ul>
                                                <li>
                                                    <p className={style.time}>时间</p>
                                                    <div className={style.text}>
                                                        <h1>xxxxxxxxxxxxxxxx</h1>
                                                        <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
                                                    </div>
                                                    <div className={style.link}>
                                                        <a href="#">阅读更多>></a>
                                                    </div>
                                                </li>
                                                <li><p className={style.time}>时间</p>
                                                    <div className={style.text}>
                                                        <h1>xxxxxxxxxxxxxxxx</h1>
                                                        <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
                                                    </div>
                                                    <div className={style.link}>
                                                        <a href="#">阅读更多>></a>
                                                    </div></li>
                                                <li><p className={style.time}>时间</p>
                                                    <div className={style.text}>
                                                        <h1>xxxxxxxxxxxxxxxx</h1>
                                                        <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
                                                    </div>
                                                    <div className={style.link}>
                                                        <a href="#">阅读更多>></a>
                                                    </div></li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </ReactFullpage.Wrapper>
                        );
                    }}
                /></div>
        )
    }
}

